<template>
	<view class="flex items-center text-size-24rpx h-60rpx justify-center" style="background-color: rgba(240, 133, 25, 0.2);">
		<u-icon class="mr-5px" name="info-circle" :size="34"></u-icon>长按头像1秒可进行课程调整
	</view>
	<u-grid :col="4" :border="false">
		<u-grid-item
			v-for="item in studentList"
			:key="item.ID"
			@touchstart="handleTouchStart(item)"
			@touchend="handleTouchEnd"
			@click="handleClick(item)"
			@mousedown="handleTouchStart(item)"
		>
			<view>
				<u-image style="pointer-events: none" :show-menu-by-longpress="false" shape="circle" :width="60" :height="60" mode="aspectFit" :src="item.HeadImg"></u-image>
			</view>
			<view class="grid-text">{{item.Name}}</view>
		</u-grid-item>
		<u-empty class="m-auto mt-100rpx" text="暂无数据" v-if="visibleEmpty" mode="list"></u-empty>
	</u-grid>
	<u-select
		v-model="showBook"
		mode="mutil-column-auto"
		:list="bookTree"
		:default-value="defaultValue"
		label-name="title"
		value-name="value"
		child-name="items"
		@confirm="bookConfirm"
	></u-select>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { ktluser, ktlapi, lodash, pivotJson2 } from '@/utils';
	const user = ktluser.getUser(false)
	const studentList = ref<any[]>([]);
	const visibleEmpty = ref<boolean>(false);
	const showBook = ref(false);
	const bookTree = ref<any[]>([]);
	const defaultValue = ref<any[]>([])
	let currentStudentId = null;
	let timer = null;
	
	function toStudentReport(item: any){
		console.log('toStudentReport')
		uni.navigateTo({
			url: '../study-report/study-report?AccountId=' + item.AccountId
		})
	}
	
	let timeCnt = 0;
	let current = null;
	
	function handleTouchStart(item: any) {
		console.log('handleTouchStart')
		currentStudentId = null;
		timeCnt = new Date().getTime();
		current = item;
		timer = setTimeout(() => {
			console.log('长按事件触发', item);
			currentStudentId = item.ID;
			setStudentUnBookData(item.ID);
		}, 1000);
	}
	function handleTouchEnd() {
		// #ifdef MP
		clearTimeout(timer);
		const suff = new Date().getTime() - timeCnt;
		if (suff < 999) {
			toStudentReport(current)
		}
		// #endif
	}
	function handleClick(item: any) {
		console.log('handleClick item', item)
		const suff = new Date().getTime() - timeCnt;
		// #ifdef H5
		if (suff < 999) {
			clearTimeout(timer);
			toStudentReport(current)
		}
		// #endif
	}
	function bookConfirm(e: any[]) {
		if(e.length > 0 && currentStudentId) {
			console.log('e[e.length-1]', e[e.length-1])
			ktlapi({
				action: 'Cus_SetStudentNewBook',
				data: {
					StudentId: currentStudentId,
					BookId: e[e.length-1].value
				}
			}).then(() => {
				uni.showToast({
					title: '已成功添加书籍【' + e[e.length-1].label + '】',
					icon:'none'
				})
			})
		}
	}
	
	ktlapi({
		action: 'Cus_GetMyStudent',
		data: {
			AccountId: user.AccountID
		}
	}).then(resp => {
		const list = lodash.get(resp, 'data', []);
		if(list.length === 0) {
			visibleEmpty.value = true;
		}
		list.forEach((item: any) => {
			if (!item.HeadImg) {
				item.HeadImg = 'https://nx5.abc5g.com/images/logo.png';
			}
		})

		studentList.value = list
	})
	
	function setStudentUnBookData(StudentId: any) {
		ktlapi({
			action: 'Cus_GetStudentUnBookData',
			data: {
				StudentId
			}
		}).then((resp: any) => {
			const list = lodash.get(resp, 'data', []);
			const lvList = pivotJson2(list, 'Title')
			lvList.forEach(lv => {
				lv.value = lv.title;
				lv.items = pivotJson2(lv.items, 'GroupName')
				lv.items.forEach((group: any) => {
					group.value = group.title;
					group.items = pivotJson2(group.items, 'BookId', ['BookName'])
					group.items.forEach((book: any) => {
						book.value = book.title
						book.title = book.BookName
						delete book.items
					})
				})
			})
			
			bookTree.value = lvList;
			showBook.value = true;
		})
	}
</script>

<style>
</style>